<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>【JavaScript进阶】从import和require到JS模块化 | 个人技术的分享</title>
    <meta name="description" content="">
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/logo.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/logo.png">
    <link rel="stylesheet" href="/styles/iconfont.css">
    <meta name="description" content="切图仔、CV/API工程师。">
    <link rel="preload" href="/assets/css/0.styles.bab1657c.css" as="style"><link rel="preload" href="/assets/js/app.dfe2ff49.js" as="script"><link rel="preload" href="/assets/js/3.bd810dc8.js" as="script"><link rel="preload" href="/assets/js/4.7eb6bf85.js" as="script"><link rel="preload" href="/assets/js/37.7990b07f.js" as="script"><link rel="prefetch" href="/assets/js/10.9314e6e2.js"><link rel="prefetch" href="/assets/js/100.aff7ce2a.js"><link rel="prefetch" href="/assets/js/101.6d8bb072.js"><link rel="prefetch" href="/assets/js/102.ab4c6afe.js"><link rel="prefetch" href="/assets/js/103.f613c5b8.js"><link rel="prefetch" href="/assets/js/104.3cd8f787.js"><link rel="prefetch" href="/assets/js/105.ddd67c67.js"><link rel="prefetch" href="/assets/js/106.bf26ab7e.js"><link rel="prefetch" href="/assets/js/107.2a6632ce.js"><link rel="prefetch" href="/assets/js/108.5885d4d6.js"><link rel="prefetch" href="/assets/js/109.22628ed2.js"><link rel="prefetch" href="/assets/js/11.67c23384.js"><link rel="prefetch" href="/assets/js/110.8dcf645b.js"><link rel="prefetch" href="/assets/js/111.a75b4e6d.js"><link rel="prefetch" href="/assets/js/112.762ffa1c.js"><link rel="prefetch" href="/assets/js/113.c5b41064.js"><link rel="prefetch" href="/assets/js/114.34ec817a.js"><link rel="prefetch" href="/assets/js/115.5f0aa55b.js"><link rel="prefetch" href="/assets/js/116.698defdd.js"><link rel="prefetch" href="/assets/js/117.bb7bcca3.js"><link rel="prefetch" href="/assets/js/118.2d66657c.js"><link rel="prefetch" href="/assets/js/119.8a262cdd.js"><link rel="prefetch" href="/assets/js/12.bb124c65.js"><link rel="prefetch" href="/assets/js/120.3c491dee.js"><link rel="prefetch" href="/assets/js/121.3505af80.js"><link rel="prefetch" href="/assets/js/122.04e9a7cf.js"><link rel="prefetch" href="/assets/js/123.4e17d778.js"><link rel="prefetch" href="/assets/js/124.13b04833.js"><link rel="prefetch" href="/assets/js/125.bd0012a2.js"><link rel="prefetch" href="/assets/js/126.99cc4ec3.js"><link rel="prefetch" href="/assets/js/127.b5a83745.js"><link rel="prefetch" href="/assets/js/128.56b40a89.js"><link rel="prefetch" href="/assets/js/129.1489ad27.js"><link rel="prefetch" href="/assets/js/13.1e4b99c7.js"><link rel="prefetch" href="/assets/js/130.c64a96a8.js"><link rel="prefetch" href="/assets/js/131.7dbeedc5.js"><link rel="prefetch" href="/assets/js/132.c11a3a90.js"><link rel="prefetch" href="/assets/js/133.c02b1035.js"><link rel="prefetch" href="/assets/js/134.27e97bf6.js"><link rel="prefetch" href="/assets/js/135.5cf1ffcb.js"><link rel="prefetch" href="/assets/js/136.732866b5.js"><link rel="prefetch" href="/assets/js/137.71150c2b.js"><link rel="prefetch" href="/assets/js/138.6edc5f97.js"><link rel="prefetch" href="/assets/js/139.7dc5785a.js"><link rel="prefetch" href="/assets/js/14.230d6df1.js"><link rel="prefetch" href="/assets/js/140.df409b41.js"><link rel="prefetch" href="/assets/js/141.23e4a662.js"><link rel="prefetch" href="/assets/js/15.fbe6b5b2.js"><link rel="prefetch" href="/assets/js/16.72f3903d.js"><link rel="prefetch" href="/assets/js/17.667ac210.js"><link rel="prefetch" href="/assets/js/18.9b60328e.js"><link rel="prefetch" href="/assets/js/19.d1bb7ffd.js"><link rel="prefetch" href="/assets/js/20.4bf72a89.js"><link rel="prefetch" href="/assets/js/21.d62b0bbb.js"><link rel="prefetch" href="/assets/js/22.c15b497e.js"><link rel="prefetch" href="/assets/js/23.583da9a1.js"><link rel="prefetch" href="/assets/js/24.59df73ca.js"><link rel="prefetch" href="/assets/js/25.ae681969.js"><link rel="prefetch" href="/assets/js/26.4652101c.js"><link rel="prefetch" href="/assets/js/27.4f2c4857.js"><link rel="prefetch" href="/assets/js/28.cd131e05.js"><link rel="prefetch" href="/assets/js/29.3d4a8ee1.js"><link rel="prefetch" href="/assets/js/30.bc6d42d1.js"><link rel="prefetch" href="/assets/js/31.2c405117.js"><link rel="prefetch" href="/assets/js/32.0ceecc6e.js"><link rel="prefetch" href="/assets/js/33.12a93636.js"><link rel="prefetch" href="/assets/js/34.f4994641.js"><link rel="prefetch" href="/assets/js/35.926aff5c.js"><link rel="prefetch" href="/assets/js/36.1850fac0.js"><link rel="prefetch" href="/assets/js/38.0c59d91b.js"><link rel="prefetch" href="/assets/js/39.f5ad73cc.js"><link rel="prefetch" href="/assets/js/40.9853630f.js"><link rel="prefetch" href="/assets/js/41.ee8f051d.js"><link rel="prefetch" href="/assets/js/42.03d761cf.js"><link rel="prefetch" href="/assets/js/43.6f6c7421.js"><link rel="prefetch" href="/assets/js/44.47e28062.js"><link rel="prefetch" href="/assets/js/45.af48f901.js"><link rel="prefetch" href="/assets/js/46.c2ef1108.js"><link rel="prefetch" href="/assets/js/47.3b754edd.js"><link rel="prefetch" href="/assets/js/48.41fd0e4b.js"><link rel="prefetch" href="/assets/js/49.fa8bb2d6.js"><link rel="prefetch" href="/assets/js/5.9554ffdf.js"><link rel="prefetch" href="/assets/js/50.470960b6.js"><link rel="prefetch" href="/assets/js/51.f641e205.js"><link rel="prefetch" href="/assets/js/52.292aa625.js"><link rel="prefetch" href="/assets/js/53.06feb6d0.js"><link rel="prefetch" href="/assets/js/54.bd22026a.js"><link rel="prefetch" href="/assets/js/55.ea51cd92.js"><link rel="prefetch" href="/assets/js/56.f909fe9f.js"><link rel="prefetch" href="/assets/js/57.02f3b546.js"><link rel="prefetch" href="/assets/js/58.70a7433b.js"><link rel="prefetch" href="/assets/js/59.c0fc6ad7.js"><link rel="prefetch" href="/assets/js/6.32562f11.js"><link rel="prefetch" href="/assets/js/60.6e2b4c40.js"><link rel="prefetch" href="/assets/js/61.a52a09ff.js"><link rel="prefetch" href="/assets/js/62.27ccbcf9.js"><link rel="prefetch" href="/assets/js/63.8a96fdd6.js"><link rel="prefetch" href="/assets/js/64.4c572d6a.js"><link rel="prefetch" href="/assets/js/65.b1d5b340.js"><link rel="prefetch" href="/assets/js/66.7107370e.js"><link rel="prefetch" href="/assets/js/67.666b4292.js"><link rel="prefetch" href="/assets/js/68.8c3bd9eb.js"><link rel="prefetch" href="/assets/js/69.4c5cd008.js"><link rel="prefetch" href="/assets/js/7.84c0fac9.js"><link rel="prefetch" href="/assets/js/70.c219a726.js"><link rel="prefetch" href="/assets/js/71.a952c191.js"><link rel="prefetch" href="/assets/js/72.b1635d94.js"><link rel="prefetch" href="/assets/js/73.c828f2de.js"><link rel="prefetch" href="/assets/js/74.29555c6a.js"><link rel="prefetch" href="/assets/js/75.ddd32435.js"><link rel="prefetch" href="/assets/js/76.33b11087.js"><link rel="prefetch" href="/assets/js/77.1992b55d.js"><link rel="prefetch" href="/assets/js/78.6e4af851.js"><link rel="prefetch" href="/assets/js/79.0c6e5357.js"><link rel="prefetch" href="/assets/js/8.b775bc4d.js"><link rel="prefetch" href="/assets/js/80.a2494e79.js"><link rel="prefetch" href="/assets/js/81.ba3634f7.js"><link rel="prefetch" href="/assets/js/82.bf7c34dc.js"><link rel="prefetch" href="/assets/js/83.a424781a.js"><link rel="prefetch" href="/assets/js/84.1024c1e9.js"><link rel="prefetch" href="/assets/js/85.75a55948.js"><link rel="prefetch" href="/assets/js/86.f957a19e.js"><link rel="prefetch" href="/assets/js/87.0d718ad6.js"><link rel="prefetch" href="/assets/js/88.f17614e7.js"><link rel="prefetch" href="/assets/js/89.354fe35d.js"><link rel="prefetch" href="/assets/js/9.8eda8208.js"><link rel="prefetch" href="/assets/js/90.6dd96ee4.js"><link rel="prefetch" href="/assets/js/91.136af10e.js"><link rel="prefetch" href="/assets/js/92.a9c072ce.js"><link rel="prefetch" href="/assets/js/93.c52cc17a.js"><link rel="prefetch" href="/assets/js/94.03f26b32.js"><link rel="prefetch" href="/assets/js/95.2d937101.js"><link rel="prefetch" href="/assets/js/96.b93eee83.js"><link rel="prefetch" href="/assets/js/97.075388e9.js"><link rel="prefetch" href="/assets/js/98.297b61d9.js"><link rel="prefetch" href="/assets/js/99.df97102a.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.2e6ea98f.js">
    <link rel="stylesheet" href="/assets/css/0.styles.bab1657c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="ant-row"><div class="sidebar-button"><i aria-label="图标: bars" class="anticon anticon-bars"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i> <span></span></div> <div class="ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a href="/" class="router-link-active home-link"><img src="/logo.png" alt="个人技术的分享" class="logo"> <span class="site-name">个人技术的分享</span></a> <div class="search-box mobile-search"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div></div> <div class="ant-col ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><ul role="menu" id="nav" class="ant-menu ant-menu-horizontal ant-menu-root ant-menu-light"><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/" class="router-link-active">
          首页
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>
          博文
        </span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/blog/leetcode/">
          LeetCode
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li role="menuitem" class="ant-menu-item"><a href="/thoughts/">
          随想
        </a></li><li role="menuitem" class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute;"><div aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul> <!----></nav></div></div> <!----></header> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/blog/frontend/" aria-current="page" title="快速导航" class="sidebar-link">快速导航</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>JS/ES6/ES6+</span> <span class="arrow down"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/frontend/javascript/switch-case-and-scope.html" title="【JavaScript进阶】Switch/Case和块级作用域" class="sidebar-link">【JavaScript进阶】Switch/Case和块级作用域</a></li><li><a href="/blog/frontend/javascript/create-new-object.html" title="【JavaScript进阶】创建对象的方法" class="sidebar-link">【JavaScript进阶】创建对象的方法</a></li><li><a href="/blog/frontend/javascript/import-and-require.html" aria-current="page" title="【JavaScript进阶】从import和require到JS模块化" class="active sidebar-link">【JavaScript进阶】从import和require到JS模块化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/frontend/javascript/import-and-require.html#一、javascript模块标准" title="一、JavaScript模块标准" class="sidebar-link">一、JavaScript模块标准</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/javascript/import-and-require.html#二、import-export和require-exports的使用" title="二、import/export和require/exports的使用" class="sidebar-link">二、import/export和require/exports的使用</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/javascript/import-and-require.html#三、esm和cjs模块的相互加载" title="三、ESM和CJS模块的相互加载" class="sidebar-link">三、ESM和CJS模块的相互加载</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/javascript/import-and-require.html#四、浏览器如何加载cjs" title="四、浏览器如何加载CJS" class="sidebar-link">四、浏览器如何加载CJS</a></li><li class="sidebar-sub-header"><a href="/blog/frontend/javascript/import-and-require.html#五、参考资料" title="五、参考资料" class="sidebar-link">五、参考资料</a></li></ul></li><li><a href="/blog/frontend/javascript/export-and-export-default.html" title="【JavaScript进阶】export、export default和import" class="sidebar-link">【JavaScript进阶】export、export default和import</a></li><li><a href="/blog/frontend/javascript/array-filter.html" title="Array.prototype.filter()进阶笔记" class="sidebar-link">Array.prototype.filter()进阶笔记</a></li><li><a href="/blog/frontend/javascript/float-operation.html" title="JS的浮点运算精度问题" class="sidebar-link">JS的浮点运算精度问题</a></li><li><a href="/blog/frontend/javascript/array-sort.html" title="Array.prototype.sort()用法总结" class="sidebar-link">Array.prototype.sort()用法总结</a></li><li><a href="/blog/frontend/javascript/array-some-and-every-and-includes.html" title="Array.some()、every()、includes()方法" class="sidebar-link">Array.some()、every()、includes()方法</a></li><li><a href="/blog/frontend/javascript/object-array-classification.html" title="将数组元素按某一属性值进行分类" class="sidebar-link">将数组元素按某一属性值进行分类</a></li><li><a href="/blog/frontend/javascript/array-find-and-findindex.html" title="Array.find()和findIndex()方法" class="sidebar-link">Array.find()和findIndex()方法</a></li><li><a href="/blog/frontend/javascript/javascript-logical-operators.html" title="JS中的逻辑位运算符和移位运算符" class="sidebar-link">JS中的逻辑位运算符和移位运算符</a></li><li><a href="/blog/frontend/javascript/javascript-mulit-array.html" title="JS中如何对多维数组(矩阵)去重" class="sidebar-link">JS中如何对多维数组(矩阵)去重</a></li><li><a href="/blog/frontend/javascript/javascript-loop.html" title="JS中如何跳出循环/结束遍历" class="sidebar-link">JS中如何跳出循环/结束遍历</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS/HTML</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Web APIs</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Webpack相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>npm相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>浏览器相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>GIS相关</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>未分类文章</span> <span class="arrow right"><i aria-label="图标: down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></p> <!----></section></li></ul></aside> <main class="page"> <div class="theme-antdocs-content content__default"><h1 id="【javascript进阶】从import和require到js模块化"><a href="#【javascript进阶】从import和require到js模块化" class="header-anchor">#</a> 【JavaScript进阶】从import和require到JS模块化</h1> <!----> <h2 id="一、javascript模块标准"><a href="#一、javascript模块标准" class="header-anchor">#</a> 一、JavaScript模块标准</h2> <p>在JavaScript中，存在两种模块化标准。第一种是ES6模块化标准（以下简称<code>ESM</code>），另一种则是<code>CommonJS</code>规范（以下简称<code>CJS</code>）。</p> <p><font color="red">⚠️二者互不兼容。</font></p> <p>其中<code>CJS</code>最早出现。在此之前，前端没有模块化概念，在各种插件中的变量命名<strong>容易污染全局作用域</strong>，简直就是灾难。</p> <hr> <p><code>import/export</code>和<code>require/exports</code>分属于<code>ESM</code>和<code>CJS</code>标准，它们有很大的区别。</p> <h3 id="_1-cjs"><a href="#_1-cjs" class="header-anchor">#</a> 1.<code>CJS</code></h3> <p><code>CJS</code>先于<code>ESM</code>被提出，<code>CJS</code>诞生之初是为了在<strong>浏览器环境之外</strong>的地方使用模块化的JavaScript。</p> <blockquote><p>在<code>CJS</code>中，<strong>每一个文件就是一个模块，拥有自己独立的作用域，变量，以及方法等，对其他的模块都不可见。<code>CommonJS</code>规范规定，每个模块内部，<code>module</code>变量代表当前模块。这个变量是一个对象，它的<code>exports</code>属性（即<code>module.exports</code>）是对外的接口。加载某个模块，其实是加载该模块的<code>module.exports</code>属性。<code>require</code>方法用于加载模块。</strong> <em>—— 阮一峰</em></p></blockquote> <p>Node采用<code>CJS</code>规范，所以我们会发现<code>CJS</code>模块通常需要Node环境的支持，换句话说，它需要服务器环境的支持。</p> <div class="custom-block tip"><p class="custom-block-title">要点</p> <ul><li>1.<code>Node</code>支持<code>CJS</code>和<code>ESM</code>，参考<a href="#%E4%B8%89%E3%80%81esm%E5%92%8Ccjs%E6%A8%A1%E5%9D%97%E7%9A%84%E7%9B%B8%E4%BA%92%E5%8A%A0%E8%BD%BD">esm和cjs模块的相互加载</a>。</li> <li>2.<code>CJS</code><strong>不能在浏览器中运行</strong>，但可以将其转换成<code>ESM</code>后在浏览器中运行。</li></ul></div> <h3 id="_2-esm"><a href="#_2-esm" class="header-anchor">#</a> 2.<code>ESM</code></h3> <p><code>ESM</code>是ECMAScript标准的模块化标准，在<strong>ES6</strong>中被正式提出。在此之前的<code>CJS</code>标准应用场景是服务端环境，<code>ESM</code>则是用于<strong>浏览器环境</strong>。</p> <div class="custom-block tip"><p class="custom-block-title">要点</p> <ul><li><p>1.<code>ESM</code>加载时属于<strong>静态加载</strong>，可以在加载时进行<code>Tree Shaking</code>，即<strong>树摇</strong>，去除<strong>模块中引入了却未被使用的方法</strong>，以减小打包后的代码体积，获得更快的加载速度。</p></li> <li><p>2.<code>ESM</code>可以直接在<strong>现代浏览器</strong>中运行。例👇：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>module<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token operator">...</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul></div> <h3 id="_3-二者区别"><a href="#_3-二者区别" class="header-anchor">#</a> 3.二者区别</h3> <ul><li><p><strong>如何简单区分二者</strong>：👇</p> <ul><li><code>CJS</code>：<code>require/exports</code></li> <li><code>ESM</code>：<code>import/export</code></li></ul></li> <li><p><strong>加载时的区别：</strong></p> <p><code>CJS</code>属于<strong>运行时加载（动态加载），理论上可以放在代码的任何地方</strong>，<code>CJS</code>在加载时会加载模块内的所有的东西，使用其中的一种或几种。而<code>ESM</code>属于<strong>编译时加载（静态加载），必须放在代码顶部</strong>，它可以在编译时就完成模块加载，速度比较快。</p></li></ul> <div class="custom-block danger"><p class="custom-block-title">为何动态加载不能进行Tree Shaking，只有静态加载时可以？</p> <p><code>CJS</code>属于运行时加载，可以在代码中的任何地方引入，如果有以下代码片段：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>flag<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    myModule <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;a_module_path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    myModule <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;b_module_path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>由于无法确定用到了哪个模块，所以无法进行<code>Tree Shaking</code>。</p> <hr> <p>与<code>CJS</code>不同的是<code>ESM</code>中所有模块必须在代码顶部声明引入。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> AModule <span class="token keyword">from</span> <span class="token string">&quot;a_module_path&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> BModule <span class="token keyword">from</span> <span class="token string">&quot;b_module_path&quot;</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div> <h2 id="二、import-export和require-exports的使用"><a href="#二、import-export和require-exports的使用" class="header-anchor">#</a> 二、<code>import/export</code>和<code>require/exports</code>的使用</h2> <h3 id="_1-import-export"><a href="#_1-import-export" class="header-anchor">#</a> 1.<code>import/export</code></h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// module</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> func<span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> func<span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> func<span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token punctuation">{</span> func1<span class="token punctuation">,</span> func2 <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token operator">*</span> <span class="token keyword">from</span> <span class="token string">&quot;other_module_path&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// main</span>
<span class="token keyword">import</span> func <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> newFunc <span class="token keyword">as</span> func <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> funcModule <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> func <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> module<span class="token punctuation">,</span> <span class="token punctuation">{</span> func <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h3 id="_2-require-exports"><a href="#_2-require-exports" class="header-anchor">#</a> 2.<code>require/exports</code></h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// module</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">func</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// main</span>
<span class="token keyword">const</span> funcModule <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;module&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 全部引入</span>
funcModule<span class="token punctuation">.</span><span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="三、esm和cjs模块的相互加载"><a href="#三、esm和cjs模块的相互加载" class="header-anchor">#</a> 三、<code>ESM</code>和<code>CJS</code>模块的相互加载</h2> <div class="custom-block danger"><p class="custom-block-title">⚠️注意</p> <p>值得注意的是，两种模块的相互加载需要在<code>Node</code>环境下，<strong>因为<code>CJS</code>模块不能在浏览器中运行</strong>。</p></div> <h3 id="_1-在esm中引入cjs模块"><a href="#_1-在esm中引入cjs模块" class="header-anchor">#</a> 1.在<code>ESM</code>中引入<code>CJS</code>模块</h3> <p><code>import</code>可以加载<code>CJS</code>模块，但是必须是整体加载，否则会报错。👇</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// module 为CJS模块</span>
<span class="token keyword">import</span> module <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span><span class="token comment">// √</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> func <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span><span class="token comment">// ×</span>

<span class="token comment">// 部分加载</span>
<span class="token keyword">import</span> module <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> func <span class="token punctuation">}</span> <span class="token operator">=</span> module<span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>在<code>Node</code>环境中使用<code>import</code>加载<code>CJS</code>模块时，<code>Node</code>会将<code>CJS</code>模块的<code>module.exports</code>输出的结果作为<strong>默认输出</strong>。即<code>module.exports</code>等于<code>export dafult</code>。👇</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// CJS module</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token string">&quot;a&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token string">&quot;b&quot;</span>
<span class="token punctuation">}</span>

<span class="token comment">// main</span>
<span class="token keyword">import</span> module <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span><span class="token comment">// module: {a: &quot;a&quot;, b: &quot;b&quot;}</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token keyword">default</span> <span class="token keyword">as</span> module <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;module&quot;</span><span class="token punctuation">;</span><span class="token comment">// module: {a: &quot;a&quot;, b: &quot;b&quot;}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="_2-在cjs中引入esm模块"><a href="#_2-在cjs中引入esm模块" class="header-anchor">#</a> 2.在<code>CJS</code>中引入<code>ESM</code>模块</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// ESM module</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;fun!&quot;</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// main</span>
<span class="token keyword">const</span> module <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;module&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// ×</span>
<span class="token comment">// {default: {...}, ...}</span>
<span class="token keyword">const</span> module <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;module&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>default<span class="token punctuation">;</span><span class="token comment">// √</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="四、浏览器如何加载cjs"><a href="#四、浏览器如何加载cjs" class="header-anchor">#</a> 四、浏览器如何加载<code>CJS</code></h2> <p>上面一节的<a href="#%E4%B8%89%E3%80%81esm%E5%92%8Ccjs%E6%A8%A1%E5%9D%97%E7%9A%84%E7%9B%B8%E4%BA%92%E5%8A%A0%E8%BD%BD">ESM和CJS模块的相互加载</a>实际上讲的是如何在<code>Node</code>环境加载<code>ESM</code>，那么浏览器环境下如何加载<code>CJS</code>？</p> <p>答案是<strong>转格式</strong>。。详见<a href="#%E4%BA%94%E3%80%81%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99">参考资料[4]</a>。</p> <h2 id="五、参考资料"><a href="#五、参考资料" class="header-anchor">#</a> 五、参考资料</h2> <ul><li><em>1.<a href="https://zhuanlan.zhihu.com/p/113009496" target="_blank" rel="noopener noreferrer">前端科普系列-CommonJS：不是前端却革命了前端<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></em></li> <li><em>2.<a href="https://blog.csdn.net/qq_18547381/article/details/105679955" target="_blank" rel="noopener noreferrer">CommonJS模块与ES6模块相互加载<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></em></li> <li><em>3.<a href="http://www.ruanyifeng.com/blog/2020/08/how-nodejs-use-es6-module.html" target="_blank" rel="noopener noreferrer">Node.js 如何处理 ES6 模块 - 阮一峰的网络日志<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></em></li> <li><em>4.<a href="http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html" target="_blank" rel="noopener noreferrer">浏览器加载 CommonJS 模块的原理与实现 - 阮一峰的网络日志<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></em></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">2 years ago</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev"><a href="/blog/frontend/javascript/create-new-object.html" class="prev"><i aria-label="图标: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>
        【JavaScript进阶】创建对象的方法
      </a></span> <span class="next"><a href="/blog/frontend/javascript/export-and-export-default.html">
        【JavaScript进阶】export、export default和import
        <i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" focusable="false" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></span></p></div> </main> <!----></div><div class="global-ui"><div id="loading-mask"><div class="loading-wrapper"><span class="loading-dot loading-dot-spin"><i></i> <i></i> <i></i> <i></i></span></div></div><div id="live2d-widget" class="live2d-widget-container" style="position:fixed;right:10px;bottom:60px;width:135px;height:300px;z-index:99999;opacity:0.8;pointer-events:none;"><canvas id="live2d_canvas" width="135" height="300" class="live2d_canvas" style="position:absolute;left:0px;top:0px;width:135px;height:300px;"></canvas></div></div></div>
    <script src="/assets/js/app.dfe2ff49.js" defer></script><script src="/assets/js/3.bd810dc8.js" defer></script><script src="/assets/js/4.7eb6bf85.js" defer></script><script src="/assets/js/37.7990b07f.js" defer></script>
  </body>
</html>